<template>
	<view class="qiuzu">
		<view class="hearder">
			<!-- 搜索 -->
			<view class="sousuo">
				<u-search shape="square" placeholder="找活、找工程" v-model="keyword"></u-search>
				<view class="sear">搜索</view>
			</view>
			<!-- 下拉菜单 -->
			<view class="xiala">
				<u-dropdown>
					<u-dropdown-item v-model="value1" title="郑州" :options="options1"></u-dropdown-item>
					<u-dropdown-item v-model="value2" title="所有机械" :options="options2"></u-dropdown-item>
					<u-dropdown-item v-model="value3" title="最新" :options="options3"></u-dropdown-item>
				</u-dropdown>
			</view>
		</view>
		<!-- 加入群聊 -->
		<view class="qunliao">
			<view class="qunliao-left">
				<view class="quliao-img">
					<u-image width="110rpx" height="100rpx" border-radius="10rpx" src="/static/dome/qunliao.jpg">
					</u-image>
					<view class="imgtag">99+</view>
				</view>
				<view class="qunliao-title">
					<view class="qunming">拉你进机械微信群</view>
					<text class="kefu">鱼泡客服:156080008605</text>
				</view>
			</view>
			<u-button class="btn" type="error" shape="circle" :plain="true" size="mini">加入群聊</u-button>
		</view>
		<!-- 内容 -->
		<view class="main" @click="todetails">
			<view class="title">
				<text class="tet u-line-1">荥阳到济源拉钢筋,电话联系</text>
			</view>
			<!-- 头像信息 -->
			<view class="head">
				<view class="head-left">
					<u-image width="100rpx" height="100rpx" shape="circle" src="/static/dome/touxiang.jpg"></u-image>
				</view>
				<view class="head-right">
					<view class="right-dianhua">
						<text>王先生 18703617***</text>
						<view class="icon">
							<u-icon name="phone-fill" color="#fff" size="28rpx" top="3"></u-icon>
						</view>
					</view>
					<view class="right-info">
						自卸车/半挂车/翻斗车
					</view>
					<view class="right-dizhi">
						<view>
							<u-icon name="map-fill" color="#fa3534" size="28rpx"></u-icon>河南 郑州
						</view>
						<text>2023-03-27 10:30</text>
					</view>
				</view>
			</view>
		</view>
		<!-- 2 -->
		<view class="main">
			<view class="title">
				<text class="tet u-line-1">焦作到郑州,现在装车有空的联系</text>
			</view>
			<!-- 头像信息 -->
			<view class="head">
				<view class="head-left">
					<u-image width="100rpx" height="100rpx" shape="circle" src="/static/dome/touxiang.jpg"></u-image>
				</view>
				<view class="head-right">
					<view class="right-dianhua">
						<text>王先生 18703617***</text>
						<view class="icon">
							<u-icon name="phone-fill" color="#fff" size="28rpx" top="3"></u-icon>
						</view>
					</view>
					<view class="right-info">
						自卸车/半挂车/翻斗车
					</view>
					<view class="right-dizhi">
						<view>
							<u-icon name="map-fill" color="#fa3534" size="28rpx"></u-icon>河南 郑州
						</view>
						<text>2023-03-27 10:30</text>
					</view>
				</view>
			</view>
		</view>
		<!-- 3 -->
		<view class="main">
			<view class="title">
				<text class="tet u-line-1">焦作到郑州,现在装车有空的联系</text>
			</view>
			<!-- 头像信息 -->
			<view class="head">
				<view class="head-left">
					<u-image width="100rpx" height="100rpx" shape="circle" src="/static/dome/touxiang.jpg"></u-image>
				</view>
				<view class="head-right">
					<view class="right-dianhua">
						<text>王先生 18703617***</text>
						<view class="icon">
							<u-icon name="phone-fill" color="#fff" size="28rpx" top="3"></u-icon>
						</view>
					</view>
					<view class="right-info">
						自卸车/半挂车/翻斗车
					</view>
					<view class="right-dizhi">
						<view>
							<u-icon name="map-fill" color="#fa3534" size="28rpx"></u-icon>河南 郑州
						</view>
						<text>2023-03-27 10:30</text>
					</view>
				</view>
			</view>
		</view>
		<!-- 引入自定义tab组件 -->
		<cust-tab :current="1"></cust-tab>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				keyword: '',
				value1: 1,
				value2: 2,
				value3: 3,
				options1: [{
						label: '北京',
						value: 1,
					},
					{
						label: '上海',
						value: 2,
					}
				],
				options2: [{
						label: '所有机械',
						value: 1,
					},
					{
						label: '土方机械',
						value: 2,
					},
				],
				options3: [{
						label: '最新',
						value: 1,
					},
					{
						label: '推荐',
						value: 2,
					},
				],
			}
		},
		methods: {
			todetails() {
				uni.navigateTo({
					url: "/pages/qiuzu/details"
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.qiuzu {
		background-color: #f5f5f5;
		padding-bottom: 20rpx;

		// 头部
		.hearder {
			background-color: #fff;

			// 搜索
			.sousuo {
				padding: 0 20rpx;
				position: relative;

				.sear {
					width: 100rpx;
					height: 60rpx;
					text-align: center;
					line-height: 60rpx;
					font-size: 32rpx;
					color: red;
					position: absolute;
					top: 0;
					right: 20rpx;
				}
			}
		}


		// 群聊
		.qunliao {
			height: 150rpx;
			background-color: #fff;
			margin-top: 20rpx;
			display: flex;
			padding: 20rpx;
			justify-content: space-between;
			align-items: center;

			.qunliao-left {
				display: flex;

				.quliao-img {
					position: relative;

					.imgtag {
						position: absolute;
						top: -15rpx;
						right: -10rpx;
						padding: 0 6rpx;
						background-color: #fa3534;
						border-radius: 20rpx;
						color: #fff;
					}
				}

				.qunliao-title {
					margin-left: 30rpx;

					.qunming {
						font-size: 28rpx;
						font-weight: 700;
					}

					.kefu {
						font-size: 24rpx;
						color: #afafaf;
					}
				}
			}

			.btn {
				margin: 0;
				background-color: #fff !important;
			}


		}

		// 内容
		.main {
			padding: 20rpx;
			margin-top: 20rpx;
			background-color: #fff;

			.title {
				font-size: 32rpx;
				font-weight: 700;
				padding: 10rpx 0 30rpx 40rpx;
				border-bottom: 1px solid #f0efef;

				.tet {
					display: block;
					width: 330rpx;
				}
			}

			// 头像
			.head {
				padding: 20rpx;
				display: flex;

				.head-left {
					width: 140rpx;
				}

				.head-right {
					flex: 1;

					.right-dianhua {
						display: flex;
						justify-content: space-between;

						.icon {
							width: 40rpx;
							height: 40rpx;
							background-color: $uni-color-error;
							border-radius: 50%;
							text-align: center;
						}
					}

					.right-info {
						width: 280rpx;
						text-align: center;
						margin: 20rpx 0;
						font-size: 24rpx;
						background-color: #f7f7f6;
					}

					.right-dizhi {
						display: flex;
						justify-content: space-between;
						font-size: 24rpx;
						color: #bababa;
					}
				}

			}
		}
	}
</style>
